<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>容器类</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        div.box {
            height: 100px;
            margin-top: 15px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box layui-main">layui-main 限定宽度1140px，不会改</div>
    <div class="box layui-container">layui-container 响应式的设置</div>
    <div class="box layui-fluid">layui-fluid 与父元素同宽，左右加15px的padding</div>

    <!-- 响应式：元素像变形金刚一样，会随着页面的大小改变而改变自身宽度
        lg: 大尺寸    屏幕宽 > 1200px  版心 1140px
        md: 中等尺寸  屏幕宽 > 992px   版心 970px
        sm: 小尺寸    屏幕宽 > 768px   版心  750px
        xs: 超小屏幕  屏幕宽 < 768px   移动端 -->
    <script type="text/javascript">
        
    </script>
</body>
</html>